// 放置全局指令
import Vue from "vue";
import store from "@/store";

// 封装和按钮权限控制相关的指令

// 实现流程

// 1 全局指令的定义方式 - 没有任何功能指令模板代码跑通
Vue.directive("btn-auth", {
  // 2. 指令绑定的元素被渲染到dom中自动执行
  inserted(el, binding) {
    // el: 指令绑定到的那个dom元素 - button
    // binding: 指令的绑定值 v-btn-auth = "指令绑定值"
    console.log(el, binding, '指令绑定的元素和绑定值');
    // 打印出来分别结果是
    // <button>获取用户信息</button>
    // {name: 'btn-auth', rawName: 'v-btn-auth', value: 'yest', expression: "'yest'", modifiers: {…}, …}
    // 2. 在指令中添加控制按钮显示和隐藏
    // 核心逻辑：判断当前按钮独有的权限标识是否在我们的perms中找到，如果找到，则显示，否则隐藏
    const btnPerms = binding.value // 获取指令绑定的值 当前按钮的权限标识 固定的 和后端商量好的[park:enterprise:add_edit]
    // console.log(store.state);
    const userPerms = store.state.user.profile.permissions // [park:enterprise:add_edit,park:enterprise:list,park:enterprise:del]
    console.log(btnPerms, userPerms, '按钮权限标识和用户权限标识');
    // 如果在用户权限标识数组中不存在btnPerms中的这个字符串park:enterprise:add_edit，就删除这个按钮,有这个按钮的权限标识再给它显示出来
    if (!userPerms.includes(btnPerms)) {
      el.remove()
    }
  },
})
